﻿<%@ page import="java.util.Date" %>
<%@ page import="java.net.URLEncoder" %>
<%@ page import="java.net.URLDecoder" %><%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2016/8/22
  Time: 11:30
  To change this template use File | Settings | File Templates.
--%>
<%
    String tag = request.getSession().getAttribute("tag")+"";
    String targetId= request.getSession().getAttribute("targetId")+"";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>新途加油新西兰</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/static/bootstrap-3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="index.css">
    <script src="${cdnContentPath}/static/jquery/jquery-3.1.0.min.js"></script>
    <script src="${cdnContentPath}/static/bootstrap-3.3.5/js/bootstrap.min.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <style>
        body {
            background: #2C3243;
        }
    </style>
</head>
<body>
<img src="img/background.png" style="width:100%;height:100%;position: absolute;z-index: -1">
<div class="main">
    <div class="head">
        <div class="head-img">
            <img class="frame" src="img/blue-2x.png" alt="加载错误">
            <img class="img" id="head-img" src="img/headimg.png" alt="加载错误">
        </div>
    </div>
    <div class="head-text">
        <span>到达新西兰即可获得现金大奖</span>
    </div>
    <div class="height-40"></div>
  <%--  <div style="width:100%">
        <div class="img-ticket" style="width:10%;">
            <img src="img/ticket-2x.png" style="width:63px" >
        </div>
        <div style="width:80%;height:20px;background:white"></div>
        <div class="img-house" style="width:10%">
            <img src="img/house-2x.png" style="width:47px" >
        </div>
    </div>--%>
    <div class="head juli">
        <div class="energy radius" id="energy">
            <div class="value radius"></div>
        </div>
        <img class="ticket" id="ticket" src="img/ticket-2x.png">
        <span class="body-text">我</span>
        <img class="house" src="img/house-2x.png">
        <span class="body-text" style="" id="new-text">新西兰</span>
    </div>
    <div style="height:10px"></div>
    <div class="head-text">
        <span>您已经飞了<span id="rest">0</span>公里，还有<span id="restD">8000</span>公里即可抽取大奖</span>
    </div>
    <div class="height-40"></div>
    <div style="width:60%;margin:0 auto">
        <img src="img/bottom-1-2x.png" style="width:100%;display: block;z-index: 999999;" id="bottom-1"/>
        <img src="img/bottom-2-2x.png" style="width:100%;" id="bottom-2"/>
    </div>
    <div class="height-40"></div>
    <div class="head-text" style="color:#E3B540">
        <span>前三位到达的即可获得新途微助手600元现金券</span><br/>
        <span>其余参与者皆可获得丰富的礼物</span>
    </div>
    <div style="width:80%;margin:0 auto;">
        <img src="img/paihang-head.png" style="width:100%;"/>
        <div style="width:100%;background:#B7221E;padding:10px" id="phb">
           <%-- <div class="phb-ul">
                <div class="phb-li">
                    <div style="float:left">
                        <img src="img/headimg.png" alt="加载错误">
                    </div>
                    <div style="float:left">

                    <span class="">小天使</span><br/>
                    <span class="">12月23日 15:32</span><br/>
                    <span class="">帮您飞了<span class="tag">200 公里</span></span>
                    </div>
                </div>
            </div>--%>
        </div>
        <img src="img/paihang-button.png" style="width:100%;"/>
    </div>
</div>
<input type="hidden" id="username" value="${param.username}"/>
<input type="hidden" id="targetId" value="${param.targetId}"/>
<script type="text/javascript">
    $(document).ready(function () {
        var tag = "<%=tag%>";//验证标记
        var desc = '新途加油新西兰';
        var title = '您的好友正在前往新西兰，快来给他加油。';
        var username  ;
        var restD;
        var imgUrl;
        var clickTag = false;
        var link = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx1a5d74a8c7cb135e&redirect_uri=http%3a%2f%2fweixin.mulanweb.com%2fmulanweb%2fevent%2froute&response_type=code&scope=snsapi_base&state=t2t_<%=targetId%>#wechat_redirect';
        //获取详情信息
        $.post("/mulanweb/event/getDetailPage",{tag:tag},function(info){
            title = info.title;
            desc = info.desc;
            username = info.username;
            restD = info.restD;
            imgUrl = info.headImg;
            $("#restD").html(restD);
            $("#rest").html(8000-restD);
            $("#head-img").attr("src",imgUrl);
            var restJL = (1- restD/ 8000)*100;
            $(".value").width(restJL+"%");
            clickTag = true;
        });

        var amountWidth =  $(".juli").width();
        var lessWidth = $(".ticket").width() + $(".house").width();
        var spanWidth = $("#new-text").width();
        var lastValue = amountWidth - lessWidth;
        var lastResult = lastValue-spanWidth;
        $("#energy").width(lastResult+10);
        $("#new-text").css('left',(lastValue/amountWidth)*100 +"%");


        var para = {
            url: location.href.split('#')[0],
        }
        $.post("/mulanweb/event/getOrder",{tag:tag},function(info){
            createOrderModel(info);
        })

        var url = "${ctx}/mulanweb/wecharPay/getSignature";
        $.ajax({
                url: url,
                async: true,
                debug: true,
                type: "post",
                dataType: "json",
                data: para,
                success: function (data) {
                    var info = data.DataList;
                    wx.config({
                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        appId: 'wx1a5d74a8c7cb135e', // 必填，公众号的唯一标识
                        timestamp: info.timestamp, // 必填，生成签名的时间戳
                        nonceStr: info.noncestr, // 必填，生成签名的随机串
                        signature: info.signature,// 必填，签名，见附录1
                        jsApiList: [
                            'onMenuShareAppMessage',
                            'scanQRCode',
                            'onMenuShareTimeline',
                            'getLocation',
                            'onMenuShareQQ',
                            'onMenuShareWeibo',
                            'onMenuShareQZone'
                        ], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                        success:function(){
                            alert("网页授权成功");
                        },
                        fail:function(){
                            alert("网页授权失败");
                        }
                    });
                }
            });

        wx.error(function (res) {
                // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
                alert("配置失败");
                console.info(res);
            });

        wx.ready(function () {
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
            setFx();
        });

        function setFx(){
            desc = '新途加油新西兰';
            title = '您的好友'+username+'正在前往新西兰，快来给他加油。';
            //分享到朋友圈
            wx.onMenuShareTimeline({
                title:title,
                link:link,
                imgUrl:imgUrl,
                success:function(){
                    //成功
                    fxS();
                },
                cancel:function(){
                    //取消
                    fxF();
                }
            })

            //分享给朋友
            wx.onMenuShareAppMessage({
                title:title,
                link:link,
                desc:desc,
                imgUrl:imgUrl,
                success:function(){
                    //成功
                    fxS();
                },
                cancel:function(){
                    //取消
                    fxF();
                }
            })

            //分享到QQ
            wx.onMenuShareQQ({
                title:title,
                link:link,
                desc:desc,
                imgUrl:imgUrl,
                success:function(){
                    //成功
                    fxS();
                },
                cancel:function(){
                    //取消
                    fxF();
                }
            });

            //分享到腾讯微博
            wx.onMenuShareWeibo({
                title:title,
                link:link,
                desc:desc,
                imgUrl:imgUrl,
                success:function(){
                    //成功
                    fxS();
                },
                cancel:function(){
                    //取消
                    fxF();
                }
            });

            //QQ空间
            wx.onMenuShareQZone({
                title:title,
                link:link,
                desc:desc,
                imgUrl:imgUrl,
                success:function(){
                    //成功
                    fxS();
                },
                cancel:function(){
                    //取消
                    fxF();
                }
            });

        }

        //分享成功
        function fxS(){
            alert("分享成功");
        }

        //分享失败
        function fxF(){
            alert("分享失败");
        }

        function createOrderModel(info){
            if(info.ReturnCode == 1){
                var html = [];
                for(var tt in info.DataList){
                    html[tt] = '<div class="phb-ul">'
                            +     '<div class="phb-li">'
                            +       '<img src="'+info.DataList[tt].HeadImg+'" alt="加载错误">'
                            +       '<span class="username" >'+info.DataList[tt].Username+'</span>'
                            +       '<span class="time">'+info.DataList[tt].Time+'</span><br/>'
                            +       '<span class="juli">帮您飞了<span class="tag">'+info.DataList[tt].Juli+' 公里</span></span>'
                            +      '</div>'
                            +  '</div>'
                }

                $("#phb").html(html.join(""));
            }else{
                alert(info.AlertMessage||"加载出错");
            }

        }

        //兑换优惠券码
        function exchangeCoupon(){
            var url = '/mulanweb/event/exchangeCoupon';
            $.post(url,{},function(info){
                alert(info.DataList || info.AlertMessage);
            })
        }

        $("#bottom-1").on("click",function(){
            if(clickTag){
                alert("请点击右上角分享");
            }else{
                alert("加载未完成");
            }
        });
        $("#bottom-2").on("click",function(){
            if(clickTag){
                exchangeCoupon();
            }else{
                alert("加载未完成");
            }
        });
    })
</script>
</body>
</html>
